<template>
	<el-card class="box-card" style="height: 230px;background-color: #DCDFE6;opacity: 0.6;">
	  <div slot="header" class="clearfix">
	    <span>天气</span>
	    <el-button style="float: right; padding: 3px 0" type="text">当前城市：{{data.city}}</el-button>
	  </div>
	  <div class="text item" style="line-height: 24px;color: #606266;">
		  <el-row>
			  <el-col :span="5">
				  <el-row>
					  <el-col :span="12" style="text-align: right;font-size: 28px;line-height: 48px;padding-right: 5px;">12</el-col>
					  <el-col :span="12" style="padding-left: 5px;">
						  <el-row>°C</el-row>
						  <el-row style="font-size: 16px;">{{data.realtime.info}}</el-row>
					  </el-col>
				  </el-row>
				  <el-row class="center top">
					  {{data.realtime.temperature}}°C
				  </el-row>
				  <el-row class="center">
					  {{data.realtime.info}}
				  </el-row>
				  <el-row class="center">
					  {{data.realtime.direct}}{{data.realtime.power}}
				  </el-row>
				  <el-row class="center">
					  <el-button size="mini" type="primary">{{data.realtime.humidity}}&nbsp;&nbsp;{{initSd(data.realtime.humidity)}}</el-button>
				  </el-row>
			  </el-col>
			  <el-col :span="4" v-for="(item,index) in data.future" :key="index" style="border-left: 1px solid white;" class="center">
				  <div>{{item.date}}</div>
				  <div style="margin-top: 8px;"></div>
				  <el-row class="center top">
					  {{item.temperature}}
				  </el-row>
				  <el-row class="center">
					  {{item.weather}}
				  </el-row>
				  <el-row class="center">
					  {{item.direct}}{{item.power}}
				  </el-row>
				  <el-row class="center">
					  <el-button size="mini" type="primary">白天:&nbsp;&nbsp;{{findCityByWid(item.wid.day)}}</el-button><br>
					  <el-button size="mini" type="primary">夜晚:&nbsp;&nbsp;{{findCityByWid(item.wid.night)}}</el-button>
				  </el-row>
			  </el-col>
		  </el-row>
	  </div>
	</el-card>
</template>
<style scoped="scoped">
	.el-button--mini {
	    padding: 2px 6px;
	}
	.center{
		font-size: 12px;
		text-align: center;
		margin-left: -10px;
	}
	.top{
		margin-top: 6px;
	}
</style>
<script>
	import Util from '@/assets/js/util';
	import getIPs from '@/utils/ipUtil'
	export default {
	    name: "notice",
      created() {
          this.init()
      },
      data() {
        return {
        data:{
          realtime:{}
        },
        citys:{},
        city:'成都',
      }
		},
		methods: {
			init(){
				// getIPs(function(ip){alert(ip);});
				this.getWeatherData();
				this.getCitys();
			},
			findCityByWid(id){
				for(let index in this.citys){
					let city = this.citys[index];
					if(city.wid == id){
						return city.weather;
					}
				}
			},
			initSd(code){
				if(code < 100 && code >70) return "潮湿";
				if(code > 100) return "极度潮湿";
				if(code <= 70 && code >60) return "良";
				if(code <= 60 && code >40) return "优";
				if(code <= 40) return "干燥潮湿";
				return "参数错误";
			},
			async getWeatherData(){
				let _this = this;
				this.$axios.get('/weather/simpleWeather/query?city='+this.city+'&key=8b4a430baa2edaaa7a3089c89adcb15a' ).then(function(reponse){
					if(reponse.data.error_code == 0){
						_this.data = reponse.data.result;
					}
				}).catch(() => {
					
				})
			},
			async getCitys(){
				let _this = this;
				this.$axios.get('/weather/simpleWeather/wids?key=8b4a430baa2edaaa7a3089c89adcb15a' ).then(function(reponse){
					if(reponse.data.error_code == 0){
						_this.citys = reponse.data.result;
					}
				}).catch(() => {
					
				})
			}
		},
	}
</script>

<style>
  .text {
    font-size: 13px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    /* width: 300px; */
  }
</style>
